import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import './AlgorithmList.css';

const AlgorithmList = () => {
  const [selectedCategory, setSelectedCategory] = useState('all');

  const algorithms = [
    // 排序算法
    {
      id: 'bubble-sort',
      name: '冒泡排序',
      category: 'sorting',
      difficulty: 'easy',
      description: '通过重复遍历数组，比较相邻元素并交换位置，将最大元素"冒泡"到数组末尾。',
      timeComplexity: 'O(n²)',
      spaceComplexity: 'O(1)',
      implemented: true,
      path: '/playground/bubble-sort'
    },
    {
      id: 'selection-sort',
      name: '选择排序',
      category: 'sorting',
      difficulty: 'easy',
      description: '每次从未排序部分选择最小元素，放到已排序部分的末尾。',
      timeComplexity: 'O(n²)',
      spaceComplexity: 'O(1)',
      implemented: true,
      path: '/playground/selection-sort'
    },
    {
      id: 'insertion-sort',
      name: '插入排序',
      category: 'sorting',
      difficulty: 'easy',
      description: '将数组分为已排序和未排序两部分，逐个将未排序元素插入到已排序部分的正确位置。',
      timeComplexity: 'O(n²)',
      spaceComplexity: 'O(1)',
      implemented: true,
      path: '/playground/insertion-sort'
    },
    {
      id: 'quick-sort',
      name: '快速排序',
      category: 'sorting',
      difficulty: 'medium',
      description: '选择一个基准元素，将数组分为小于和大于基准的两部分，递归排序。',
      timeComplexity: 'O(n log n)',
      spaceComplexity: 'O(log n)',
      implemented: true,
      path: '/playground/quick-sort'
    },
    {
      id: 'merge-sort',
      name: '归并排序',
      category: 'sorting',
      difficulty: 'medium',
      description: '采用分治策略，将数组分为两半，递归排序后合并。',
      timeComplexity: 'O(n log n)',
      spaceComplexity: 'O(n)',
      implemented: false
    },
    // 经典算法
    {
      id: 'binary-search',
      name: '二分查找',
      category: 'classic',
      difficulty: 'easy',
      description: '在有序数组中查找目标值，每次比较中间元素，将搜索范围缩小一半。',
      timeComplexity: 'O(log n)',
      spaceComplexity: 'O(1)',
      implemented: true,
      path: '/playground/binary-search'
    },
    // 链表操作
    {
      id: 'linked-list-basic',
      name: '链表基础',
      category: 'linked-list',
      difficulty: 'easy',
      description: '链表的增删改查基本操作，包括插入、删除、查找节点。',
      timeComplexity: 'O(n)',
      spaceComplexity: 'O(1)',
      implemented: false
    },
    {
      id: 'linked-list-reverse',
      name: '链表反转',
      category: 'linked-list',
      difficulty: 'medium',
      description: '将链表的指向关系反转，使原来的尾节点变为头节点。',
      timeComplexity: 'O(n)',
      spaceComplexity: 'O(1)',
      implemented: false
    },
    // 二叉树
    {
      id: 'binary-tree-basic',
      name: '二叉树',
      category: 'binary-tree',
      difficulty: 'medium',
      description: '二叉树的基本操作，包括插入、删除、查找节点。',
      timeComplexity: 'O(n)',
      spaceComplexity: 'O(h)',
      implemented: false
    },
    {
      id: 'binary-search-tree',
      name: '搜索二叉树',
      category: 'binary-tree',
      difficulty: 'medium',
      description: '具有特殊性质的二叉树，左子树所有节点小于根节点，右子树所有节点大于根节点。',
      timeComplexity: 'O(log n)',
      spaceComplexity: 'O(h)',
      implemented: false
    },
    {
      id: 'dfs',
      name: '深度优先搜索',
      category: 'binary-tree',
      difficulty: 'medium',
      description: '沿着树的深度遍历树的节点，尽可能深地搜索树的分支。',
      timeComplexity: 'O(n)',
      spaceComplexity: 'O(h)',
      implemented: false
    },
    {
      id: 'bfs',
      name: '广度优先搜索',
      category: 'binary-tree',
      difficulty: 'medium',
      description: '逐层遍历树的节点，先访问距离根节点最近的节点。',
      timeComplexity: 'O(n)',
      spaceComplexity: 'O(w)',
      implemented: false
    }
  ];

  const categories = [
    { id: 'all', name: '全部', icon: '📚' },
    { id: 'sorting', name: '排序', icon: '📊' },
    { id: 'classic', name: '经典算法', icon: '⭐' },
    { id: 'linked-list', name: '链表', icon: '🔗' },
    { id: 'stack', name: '栈', icon: '📚' },
    { id: 'binary-tree', name: '二叉树', icon: '🌳' }
  ];

  const filteredAlgorithms = selectedCategory === 'all' 
    ? algorithms 
    : algorithms.filter(algo => algo.category === selectedCategory);

  const getDifficultyColor = (difficulty) => {
    switch (difficulty) {
      case 'easy': return '#27ae60';
      case 'medium': return '#f39c12';
      case 'hard': return '#e74c3c';
      default: return '#95a5a6';
    }
  };

  const getDifficultyText = (difficulty) => {
    switch (difficulty) {
      case 'easy': return '简单';
      case 'medium': return '中等';
      case 'hard': return '困难';
      default: return '未知';
    }
  };

  return (
    <div className="algorithm-list">
      <div className="container">
        <div className="page-header">
          <h1>算法列表</h1>
          <p>选择你想要学习的算法，开始可视化之旅</p>
        </div>

        {/* Category Filter */}
        <div className="category-filter">
          {categories.map(category => (
            <button
              key={category.id}
              className={`category-btn ${selectedCategory === category.id ? 'active' : ''}`}
              onClick={() => setSelectedCategory(category.id)}
            >
              <span className="category-icon">{category.icon}</span>
              <span className="category-name">{category.name}</span>
            </button>
          ))}
        </div>

        {/* Algorithm Cards */}
        <div className="algorithms-grid">
          {filteredAlgorithms.map(algorithm => (
            <div key={algorithm.id} className={`algorithm-card ${!algorithm.implemented ? 'coming-soon' : ''}`}>
              <div className="card-header">
                <h3 className="algorithm-name">{algorithm.name}</h3>
                <div className="algorithm-meta">
                  <span 
                    className="difficulty-badge"
                    style={{ backgroundColor: getDifficultyColor(algorithm.difficulty) }}
                  >
                    {getDifficultyText(algorithm.difficulty)}
                  </span>
                  {!algorithm.implemented && (
                    <span className="coming-soon-badge">即将推出</span>
                  )}
                </div>
              </div>
              
              <p className="algorithm-description">{algorithm.description}</p>
              
              <div className="complexity-info">
                <div className="complexity-item">
                  <span className="complexity-label">时间复杂度:</span>
                  <span className="complexity-value">{algorithm.timeComplexity}</span>
                </div>
                <div className="complexity-item">
                  <span className="complexity-label">空间复杂度:</span>
                  <span className="complexity-value">{algorithm.spaceComplexity}</span>
                </div>
              </div>
              
              <div className="card-footer">
                {algorithm.implemented ? (
                  <Link to={algorithm.path} className="btn btn-primary">
                    开始学习
                  </Link>
                ) : (
                  <button className="btn btn-disabled" disabled>
                    敬请期待
                  </button>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default AlgorithmList;
